<script lang="ts" setup>
import {
  getOneByCondition,
  getReadonly,
  insertOne,
  reSetDialogModel,
  updateOne,
  urls
} from '@/index';

import type { DialogModel, ProjectProject } from '@/index.d';
import type { FormInstance, FormRules } from 'element-plus';

const dialogModel = defineModel<DialogModel<ProjectProject>>('dialogModel', {
  required: true
});

const { insertForbidden, updateForbidden } = getReadonly(dialogModel.value);

const formData = reactive<ProjectProject>({});

const setFormData = async (res: ProjectProject) => {
  formData.id = res.id;
  formData.creator = res.creator;
  formData.createTime = res.createTime;
  formData.updater = res.updater;
  formData.updateTime = res.updateTime;
  formData.projectProvince = res.projectProvince;
  formData.projectType = res.projectType;
  formData.projectName = res.projectName;
  formData.longProjectName = res.longProjectName;
  formData.projectUnit = res.projectUnit;
  formData.productionName = res.productionName;
  formData.ndePersonnelRequirement = res.ndePersonnelRequirement;
  formData.purchaseCompanyId = res.purchaseCompanyId;
  formData.designCompanyId = res.designCompanyId;
  formData.operatingCompanyId = res.operatingCompanyId;
};

const reSetFormData = () => {
  reSetDialogModel(dialogModel);
  formData.id = 0;
  delete formData.creator;
  delete formData.createTime;
  delete formData.updater;
  delete formData.updateTime;
  delete formData.projectProvince;
  delete formData.projectType;
  delete formData.projectName;
  delete formData.longProjectName;
  delete formData.projectUnit;
  delete formData.productionName;
  delete formData.ndePersonnelRequirement;
  delete formData.purchaseCompanyId;
  delete formData.designCompanyId;
  delete formData.operatingCompanyId;
};

watch(
  () => dialogModel.value.visible,
  value => {
    value && (formData.id = dialogModel.value.id as number);
    !value && reSetFormData();
  },
  {
    immediate: true
  }
);

watch(
  () => formData.id,
  async (value: number | undefined) => {
    if (value) {
      const res = await getOneByCondition<ProjectProject>(urls.projectProject, 'id', value);
      res && setFormData(res);
    }
  },
  {
    immediate: true
  }
);

const formDataRef = ref<FormInstance>();

interface FormDataRules {
  projectProvince: string;
  projectType: string;
  projectName: string;
  productionName: string;
}

const formDataRules = computed(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return reactive({});

    case 'insert':
      return reactive<FormRules<FormDataRules>>({
        projectProvince: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
        projectType: [{ required: true, message: '项目堆型不能为空', trigger: 'blur' }],
        projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
        productionName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }]
      });

    case 'update':
      return reactive<FormRules<FormDataRules>>({
        projectProvince: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
        projectType: [{ required: true, message: '项目堆型不能为空', trigger: 'blur' }],
        projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
        productionName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }]
      });
  }
});

const saveFormData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl
    .validate()
    .then(async valid => {
      if (valid) {
        if (dialogModel.value.id === 0) {
          const res = (await insertOne<ProjectProject>(
            urls.projectProject,
            formData
          )) as ProjectProject;
          if (res) {
            setFormData(res);
            dialogModel.value.id = res.id as number;
            dialogModel.value.type = 'update';
            dialogModel.value.change = true;
          }
        } else {
          const tempFormData: ProjectProject = {
            id: formData.id,
            longProjectName: formData.longProjectName,
            projectProvince: formData.projectProvince,
            projectType: formData.projectType,
            projectName: formData.projectName,
            projectUnit: formData.projectUnit,
            productionName: formData.productionName,
            ndePersonnelRequirement: formData.ndePersonnelRequirement,
            purchaseCompanyId: formData.purchaseCompanyId,
            designCompanyId: formData.designCompanyId,
            operatingCompanyId: formData.operatingCompanyId
          };

          const res = (await updateOne<ProjectProject>(
            urls.projectProject,
            tempFormData
          )) as ProjectProject;

          if (res) {
            dialogModel.value.change = true;
            formData.updater = res.updater;
            formData.updateTime = res.updateTime;
          }
        }
      }
    })
    .catch(res => console.log(res));
};

watch(
  () => [
    formData.projectProvince,
    formData.projectName,
    formData.projectUnit,
    formData.productionName
  ],
  ([projectProvince, projectName, projectUnit, productionName]) => {
    formData.longProjectName =
      (projectProvince == undefined ? '' : projectProvince) +
      (projectName == undefined ? '' : projectName) +
      (projectUnit == undefined || projectUnit == '' ? '' : projectUnit + '号机组') +
      (productionName == undefined ? '' : productionName);
  }
);
</script>
<template>
  <HqDialogDetail :dialog-model="dialogModel" @submit="saveFormData(formDataRef)">
    <template #default>
      <el-card shadow="hover">
        <template #header>基本信息</template>
        <template #default>
          <hq-form :model="formData" ref="formDataRef" :rules="formDataRules">
            <el-row :gutter="5">
              <hq-col v-show="false">
                <el-form-item label="id" prop="id">
                  <el-input v-model="formData.id" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目全名" prop="longProjectName">
                  <el-input v-model="formData.longProjectName" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目地址" prop="projectProvince">
                  <el-select v-model="formData.projectProvince" :disabled="updateForbidden">
                    <HqProvinceOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目堆型" prop="projectType">
                  <el-select v-model="formData.projectType" :disabled="updateForbidden">
                    <HqDictionary type-text="项目堆型" />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目名称" prop="projectName">
                  <el-input v-model="formData.projectName" :readonly="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="项目机组" prop="projectUnit">
                  <el-input
                    v-model="formData.projectUnit"
                    :readonly="updateForbidden"
                    placeholder="没有就空着，如有多个机组号，用中文‘、’间隔开"
                  />
                </el-form-item>
              </hq-col>

              <hq-col>
                <el-form-item label="产品名称" prop="productionName">
                  <el-select v-model="formData.productionName" :disabled="updateForbidden">
                    <HqDictionary type-text="产品名称" />
                  </el-select>
                </el-form-item>
              </hq-col>

              <hq-col>
                <el-form-item label="无损人员要求" prop="ndePersonnelRequirement">
                  <el-select v-model="formData.ndePersonnelRequirement" :disabled="updateForbidden">
                    <HqNdeMethodDomainOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="采购单位" prop="purchaseCompanyId">
                  <el-select
                    v-model="formData.purchaseCompanyId"
                    filterable
                    clearable
                    :disabled="updateForbidden"
                  >
                    <HqRelationOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="设计单位" prop="designCompanyId">
                  <el-select
                    v-model="formData.designCompanyId"
                    filterable
                    clearable
                    :disabled="updateForbidden"
                  >
                    <HqRelationOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="营运单位" prop="operatingCompanyId">
                  <el-select
                    v-model="formData.operatingCompanyId"
                    filterable
                    clearable
                    :disabled="updateForbidden"
                  >
                    <HqRelationOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
            </el-row>
          </hq-form>
        </template>
      </el-card>
    </template>
  </HqDialogDetail>
</template>
<style lang="scss" scoped></style>
